<template>
  <div class="chart">
    <div id="barChart" ref="barChart" class="bar-chart"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import ajax from "@/utils/ajax";
var myChart = null;
var option = {
  // color: [
  //   '#2196F3', '#00BCD4', '#009688', '#4CAF50',
  //   '#3F51B5', '#303F9F', '#01579B', '#0288D1', '#03A9F4',
  // ],

  color: ["#ae5da1", "#13b5b1", "#ffd119", "#8fc31f"],
  title: {
    text: "线路质量统计",
    left: "2%",
    top: "5%",
    textStyle: {
      color: "#fff",
      fontSize: "0.32rem",
    },
  },
  
  legend: {
    top: 15,

    bottom: 8,
    right: "15%",
    textStyle: {
      // fontSize: 13,//字体大小
      color: "#ffffff", //字体颜色
    },
    icon: "roundRect",
    type: "scroll",
    pageTextStyle: {
      color: "rgba(255, 255, 255, 1)",
    },
    pageIconColor: "rgba(255, 255, 255, 1)",
  },

  tooltip: {
    trigger: "axis",

    formatter: function (params) {
  
      let dateTime = new Date();
      let diff = params[0].dataIndex + 1 - new Date().getDay();
      dateTime = dateTime.setDate(dateTime.getDate() + diff);
      dateTime = new Date();
      let htmldata = `${getFormatDate(dateTime).slice(0, 4)}-${
        params[0].axisValueLabel
      }
        `;
      for (let item of params) {
        htmldata += `<br> ${item.marker} ${item.seriesName}：${item.data}`;
        switch (item.seriesName) {
          case "电流":
            htmldata += `A`;
            break;
          case "电压":
            htmldata += `V`;
            break;
          case "功率":
            htmldata += `W`;
            break;
          case "功率因数":
            htmldata += `%`;
            break;
          default:
            break;
        }
      }

      return htmldata;
    },
  },
  grid: {
    left: "10%",
    bottom: "15%",
  },

  xAxis: {
    type: "category",
    boundaryGap: false,
    nameTextStyle: {
      color: "#ffffff",
    },

    axisLabel: {
      show: true,
      rotate: "20",
      fontSize: 12,
      textStyle: {
        color: "#ffffff",
      },
    },
    axisLine: {
      lineStyle: {
        color: "#24a8ac",
      },
    },
  },
  dataZoom: [{ type: "inside", start: 80, end: 100, minSpan: 10 }],
  yAxis: [
    {
      type: "value",
      name: "(V/W/%)",
      nameTextStyle: {
      color: "rgba(255, 255, 255, 1)"
      },
      nameGap: 13,
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ffffff",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#24a8ac",
        },
      },
      axisTick: {
        show: false,
      },
    },
    {
      name: "(A)",
      nameTextStyle: {
      color: "rgba(255, 255, 255, 1)"
      },
      nameGap: 13,
      type: "value",
      axisLabel: {
        show: true,
        textStyle: {
          color: "#ffffff",
        },
      },
     
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#24a8ac",
        },
      },
      axisTick: {
        show: false,
      },
    },
  ],
  series: [],
};
export default {
  name: "index",
  props: {
    chargingsocketdiscountid: {
      type: Number,
    },
  },
  data() {
    return {
      showHoursData: false,
      hourChartData: {},
      areaId: 0,
      filialeOrOrgan: "",
      dataIndex: 0,
      titleName: "",
      data: [],
    };
  },
  created() {},
  mounted() {
    myChart = echarts.init(document.getElementById("barChart"));
    myChart.setOption(option);
    this.dealData();
  },
  methods: {
    // 对数据进行处理
    dealData() {
      ajax.get({
        url: this.$API.getProbeSensorDataList + this.chargingsocketdiscountid,
        success: (response) => {
          this.data = response.data;
          myChart.clear();
          let series = [];
          let xdata = [];
          let legenddata = [];
          for (let item of this.data[0].listSensorData) {
            xdata.push(item.time.slice(5, 19));
          }

          option.xAxis.data = xdata;
         
          for (let item of this.data) {
            let obj = {};
            obj.type = "line";
            obj.showSymbol = false;
            obj.name = item.name;
           
            legenddata.push(item.name);
            let sericdata = [];
            for (let itemdata of item.listSensorData) {
              sericdata.push(itemdata.value);
            }
             if (item.name == "电流") {
              obj.yAxisIndex = 1;
              option.yAxis[1].max = parseInt(Math.max(...sericdata)) + 1
            }
            obj.data = sericdata;
            series.push(obj);
          }
          option.legend.data = legenddata;
          option.series = series;
          // console.log(option.series);
          myChart.setOption(option, true);
        },
      });
    },
  },
  watch: {
    chargingsocketdiscountid(val) {
      console.log(val);
      this.dealData();
    },
  },
};
function getFormatDate(nowDate) {
  let date = nowDate;
  let month = date.getMonth() + 1;
  let strDate = date.getDate();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (strDate < 10) {
    strDate = "0" + strDate;
  }
  if (hours < 10) {
    hours = "0" + hours;
  }
  if (minutes < 10) {
    minutes = "0" + minutes;
  }
  if (seconds < 10) {
    seconds = "0" + seconds;
  }
  let currentDate = date.getFullYear() + "-" + month + "-" + strDate;
  // console.log(currentDate)
  return currentDate;
}
</script>

<style scoped lang="stylus">
.bar-chart {
  width: 5.66rem;
  height: 3.25rem;
}

.no-data {
  text-align: center;
  height: 3.25rem;
  line-height: 3.52rem;
}
</style>